<template>
  <div class="tc fs-4 p-2">软件管理</div>

  <NFlex justify="end" class="p-5">
    <NForm inline>
      <NFormItem>
        <NInput v-model:value="queryInfo.sname" placeholder="请输入软件名称"></NInput>
      </NFormItem>
      <NFormItem>
        <NInput v-model:value="queryInfo.vendor" placeholder="请输入软件厂商"></NInput>
      </NFormItem>
      <NFormItem>
        <NSpace>
          <NButton type="error" @click="selectQuuery">{{ bthText }}</NButton>
          <NButton type="primary" @click="requery">查询</NButton>
          <NButton type="primary" @click="reset">重置</NButton>
          <NButton type="default">添加</NButton>
        </NSpace>
      </NFormItem>
    </NForm>
  </NFlex>

  <div>
    <!-- 数据表格 -->
    <div>
      <NDataTable :loading="loading" :data="list" :columns="columns"></NDataTable>
    </div>

    <NFlex justify="center">
      <NPagination
        v-model:page="page.pageNumber"
        :page-size="page.pageSize"
        :item-count="page.total"
        @update-page="query"
      ></NPagination>
    </NFlex>
  </div>

  <!-- 游戏发行商选择对话框 -->
  <NModal preset="dialog" v-model:show="svisiible" title="软件发行商选择">
    <div>
      <SoftwareTypeComp mode="selector" @info-selscted="selectePublisher"></SoftwareTypeComp>
    </div>
  </NModal>
</template>

<!-- 查询的表单 -->

<script setup lang="ts">
import { ref, h, onMounted } from 'vue'
import {
  useMessage,
  NDataTable,
  NForm,
  NFormItem,
  NInput,
  NButton,
  NModal,
  NDatePicker,
  NPagination,
  NFlex,
  NSpace,
  useDialog,
} from 'naive-ui'
import type { DataTableColumn } from 'naive-ui'
import type { BaseDataResult, BaseResult, PageBean, PageVO } from '@/types/BaseResult'
import type { TbGame, TbGamePublisher } from '@/types/crud'
import { Api } from '@/types/Api'
import { Tools } from '@/types/Tools'
import type { TbSoftware, TbSoftwareType } from '@/types/softwareType'
import SoftwareTypeComp from '@/components/SoftwareTypeComp.vue'

const loading = ref(false)
const message = useMessage()

const selecteMode = ref('query')
const svisiible = ref(false)
const bthText = ref('请选择发行商')
// #region 选择发行商的部分
const selectePublisher = (info: TbSoftwareType) => {
  svisiible.value = false
  if (selecteMode.value === 'query') {
    bthText.value = info.tname
    queryInfo.value.stid = info.stid
  }
}
// #endregion

//#region 查询的部分
const page = ref({ pageNumber: 1, pageSize: 5 } as PageBean)
const queryInfo = ref({ stid: -1, sname: '', vendor: '' })
const list = ref([] as Array<TbSoftware>)

const selectQuuery = () => {
  selecteMode.value = 'query'
  bthText.value = '请选择发行商'
  queryInfo.value.stid = -1
  svisiible.value = true
}

const columns = ref([
  {
    title: '软件名称',
    key: 'sname',
  },
  {
    title: '软件简介',
    key: 'intro',
  },
  {
    title: '软件厂商',
    key: 'vendor',
  },
  {
    title: '分类名称',
    key: 'type.tname',
  },
  {
    title: '操作',
    key: 'action',
    render(row) {
      return h(NSpace, {}, [
        h(
          NButton,
          {
            size: 'small',
            type: 'info',
            onClick: () => {
              // selectModify(row)
            },
          },
          '修改',
        ),
        h(
          NButton,
          {
            size: 'small',
            type: 'error',
            onClick: () => {
              // showDelete(row)
            },
          },
          '删除',
        ),
      ])
    },
  },
] as DataTableColumn<TbSoftware>[])

const requery = () => {
  page.value.pageNumber = 1
  query()
}

const reset = () => {
  queryInfo.value = { stid: -1, sname: '', vendor: '' }
  page.value.pageNumber = 1
  bthText.value = '请选择软件分类'
  query()
}

const query = () => {
  loading.value = true
  Api.get(
    `/crud/software/${page.value.pageSize}/${page.value.pageNumber}`,
    queryInfo.value,
    (data: BaseDataResult<PageVO<TbSoftware>>) => {
      loading.value = false
      if (data.success) {
        list.value = data.data.list
        page.value = data.data.pageBean
        return
      }
      message.error(data.message)
    },
  )
}

onMounted(() => {
  query()
})

// #endregion

// #region 添加样式
const available = ref(false)

const addInfo = ref({} as TbSoftware)
const bthTextAdd = ref('请选择发行商')

const resetAdd = () => {
  addInfo.value.stid = -1
  addInfo.value.sname = ''
  addInfo.value.vendor = ''
  bthTextAdd.value = '请选择发行商'
}

const showAdd = () => {
  resetAdd()
  selecteMode.value = 'add'
  available.value = true
}
const add = () => {
  loading.value = true
  Api.post('/crud/software', addInfo.value, (data: BaseResult) => {
    loading.value = false
    if (data.success) {
      message.success('添加成功')
      available.value = false
    }
    message.error(data.message)
  })
}
</script>

<style scoped></style>
